Aller au contenu principal

⚙️ 5.1A – firebase_setup

Objectif 🎯​

Configurer une application Flutter pour fonctionner avec Firebase (authentification, base de données, stockage, notifications).

À faire 🛠️​

Étape 0 - Installer Android 34​

Sur l'image il manque Android 34 pour certaines librairies.

Exécutez la commande suivante depuis un terminal

sdkmanager "platforms;android-34" "build-tools;34.0.0"

Étape 1 - Créer un compte Firebase​

Étape 2 - Créer un projet Firebase​

  • Allez à la console Firebase: https://console.firebase.google.com/
  • Cliquez sur Créer un projet
  • Nommez votre projet
  • Vous n'avez pas besoin de Gemini, ni de Google Analytics
  • Cliquez sur Créer le projet

Étape 3 - Préparer votre projet Flutter​

  • Clonez le repo du projet (votre TP par exemple) sur votre machine locale

Étape 4 - Mettre à jour Flutter​

Dans un terminal, depuis votre dossier du projet:

flutter upgrade

Ceci assure que vous avez une version à jour de Flutter.

Étape 5 - Vérifier le fonctionnement initial​

  • Lancez votre application de base: 
    flutter run
  • Vérifiez que tout fonctionne avant de commencer la configuration Firebase.

Étape 6 - Installer firebase-cli​

À la maison seulement (déjà installé au labo). Suivez les instructions ici.

Étape 7 - Se connecter à Firebase via CLI​

Testez en exécutant dans le terminal:

firebase login

Étape 8 - Installer flutterfire-cli​

À la maison seulement (déjà installé au labo). Dans le terminal:

dart pub global activate flutterfire_cli

Flutterfire est maintenant installé, mais il n'est pas disponible dans le terminal.

  1. Dans le menu Windows, chercher "Modifier les variables d'environnement pour votre compte"
  2. Dans la section Variables utilisateur pour [votre nom d'utilisateur], chercher Path dans la liste, et double cliquer sur l'entrée.
  3. Cliquer sur Nouveau
  4. Entrer %USERPROFILE%\AppData\Local\Pub\Cache\bin
  5. Ok, Ok
  6. Redémarrer TOUS les terminaux qui pourrait être ouverts. Il faut aussi redémarrer Visual Studio Code au complet.
astuce

Si flutterfire configure ne trouve pas votre projet, suivez les instructions de Firebase kaputt 🧯.

Il devrait fonctionner au prochain cours 🙏🙏🙏.

Étape 9 - Ajouter les composants Firebase​

Depuis le dossier de votre projet Flutter:

flutter pub add firebase_core cloud_firestore firebase_auth google_sign_in firebase_storage firebase_messaging

Cela ajoute les librairies clientes de Firebase dans votre projet Flutter.

Cette étape modifie votre fichier pubspec, il faut donc faire un pub get dans votre projet dans VSCode.

COMMIT et PUSH.

Étape 10 - Configurer le projet avec FlutterFire​

Depuis le dossier du projet Flutter, tapez les commandes suivantes:

flutterfire configure

Vous serez invité à choisir le projet Firebase correspondant à votre projet. C'est l'étape où le projet de code est lié au projet Firebase. Les différentes informations pour accéder au cloud sont alors ajoutées.

Regardez les fichiers modifiés dans votre IDE (dans votre commit).

COMMIT et PUSH.

Étape 11 - Initialiser Firebase dans le code​

Dans votre fichier main.dart, remplacez la fonction main() avec:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  GoogleSignIn.instance.initialize();
  runApp(MyApp());
}

Étape 12 - Corriger minSdk si nécessaire​

Si vous voyez une erreur concernant minSdk, ouvrez le fichier android/app/build.gradle et augmentez la valeur minSdkVersion à 21 ou plus.

Étape 13 - Lancer l'application​

Lancez votre application depuis votre IDE (ça va être long, il y a des librairies à télécharger...):

flutter run

COMMIT et PUSH.

Votre application est maintenant configurée pour utiliser Firebase! Vous pouvez procéder avec les étapes d'authentification et de base de données dans les laboratoires suivants.